import { connect } from 'dva';
import React, { useEffect, useState } from 'react';
import styles from './index.less';


const home = props => {
  const { form, dispatch } = props;
  const [height, setHeight] = useState(0);
  const [width, setWidth] = useState(0)
  const [list, setList] = useState([])

  const resizeUpdate = (e) => {
    // 通过事件对象获取浏览器窗口的高度
    let h = e.target.innerHeight;
    let w = e.target.innerWidth;
    setHeight(h);
    setWidth(w)
  };

  useEffect(() => {
    // 页面刚加载完成后获取浏览器窗口的大小
    dispatch({
      type: 'Public/getContentList',
      payload: { categoryId: props.id }
    }).then((res) => {
      setList(res?.data?.rows)
    })
    let h = window.innerHeight;
    let w = window.innerWidth;
    setHeight(h)
    setWidth(w)
    // 页面变化时获取浏览器窗口的大小 
    window.addEventListener('resize', resizeUpdate);
    return () => {
      // 组件销毁时移除监听事件
      window.removeEventListener('resize', resizeUpdate);
    }
  }, []);
  const jump = () => {
    console.log("00000000");
    props.history.push('/newsCenter/detail')
  }
  return (
    <>
      {
        width > 700 ?
          <div className={styles.news}>
            <div className={styles.relation}>
              <div className={styles.title}>新闻中心</div>
              <div className={styles.describe}>时时关注行内资讯让我们快人一步</div>
              <div style={{ padding: '0 20%', width: '100%' }}>
                {
                  list.map(i => {
                    return <div className={styles.newList} onClick={jump}>
                      <div className={styles.header}>
                        <div className={styles.title}>{i?.contentTitle}</div>
                        <div className={styles.time}>{i?.createDate}</div>
                      </div>
                      <div className={styles.news_describe} >{i?.contentDescription}</div>
                    </div>
                  })
                }
              </div>
            </div>
          </div> :
          <div className={styles.mini_news}>
            <div className={styles.mini_relation}>
              <div className={styles.mini_title}>新闻中心</div>
              <div className={styles.mini_describe}>时时关注行内资讯让我们快人一步</div>
              <div style={{ padding: '0 20px', width: '100%' }}>
                {
                  list.map(i => {
                    return <div className={styles.mini_newList}>
                      <div className={styles.mini_title}>{i?.contentTitle}</div>
                      <div className={styles.mini_news_describe} >{i?.contentDescription}</div>
                      <div className={styles.mini_time}>{i?.createDate}</div>
                    </div>
                  })
                }
              </div>
            </div>
          </div>
      }
    </>

  );
};

export default connect(({ }) => ({}))(home);
